<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload</title>
</head>
<body>
    <div style="display: flex; align-items: flex-start; justify-content: space-around">
        <input type="file" id="file">
        <a href="javascript:void(0);" onclick="sliceFileAndSHow()">分解文件</a>
        <a href="javascript:void(0);" onclick="autoUpload()">全部上传</a>
        <a href="javascript:void(0);" onclick="mergerFile()">合并文件</a>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center" id="blob-container">

    </div>
    <script src="./js/spark-md5.min.js"></script>
    <script src="./js/jquery-3.5.1.js"></script>
    <script>
        let blobs = []
        let fileHash = ""
        function sliceFileAndSHow(){
            let file = $("#file")[0].files[0]
            let fileReader = new FileReader()
            blobs = sliceFile(file)
            fileReader.onload = function(){
                fileHash = SparkMD5.hashBinary(this.result)
                $.ajax({
                    type: "GET",
                    url:`http://localhost:9999/startSendFile?hash=${fileHash}`,
                    async: false,
                    success: function(res){
                        console.log("文件夹创建完毕"+res)
                        $.ajax({
                            type: "GET",
                            url:`http://localhost:9999/setFileSize?hash=${fileHash}&name=${file.name}&size=${blobs.length}`,
                            async: false,
                            success: function(res){
                                console.log("文件信息设置完毕"+res)
                            }
                        })
                    }
                })

            }
            let checkBlob = file.slice(0, 2048)
            fileReader.readAsBinaryString(checkBlob)




            $("#blob-container").html("")
            blobs.forEach(function(item, index){
                $("#blob-container").append(
                    `
                        <div style="width: 100%" id="blob${index}">blob ${index}  <a href="javascript:void(0);" id="checkBlob_${index}" blob="${index}">检查文件${index}</a> <span id="fontEndBlobResult_${index}"></span> <span id="backEndBlobResult_${index}"></span></div>
                    `
                )
                $("#blob-container").on("click", `#checkBlob_${index}`, function(){
                    let i = parseInt($(`#checkBlob_${index}`).attr("blob"))
                    uploadBlob(blobs[i], i)
                })
            })
        }
        function sliceFile(file){
            let sliceBuffer = []
            let sliceSize = file.size
            while(sliceSize > 1024 * 1024) {
                const blobPart = file.slice(sliceBuffer.length * 1024 * 1024, (sliceBuffer.length + 1) * 1024 * 1024)
                sliceBuffer.push(
                    blobPart
                )
                sliceSize -= (1024 * 1024)
            }

            if(sliceSize > 0) {
                sliceBuffer.push(
                    file.slice(sliceBuffer.length * 1024 * 1024, file.size)
                )
            }
            return sliceBuffer
        }
        function uploadBlob(blob, index){
            let data = new FormData()
            let fileReader = new FileReader()
            let hash = ""
            fileReader.onload = function(){
                hash = SparkMD5.hashBinary(this.result)
                $(`#fontEndBlobResult_${index}`).text("前端MD5:"+hash)
                data.append("blob", blob)

                $.ajax({
                    type: "POST",
                    url: `http://127.0.0.1:9999/sendBlob?file_hash=${fileHash}&hash=${hash}&index=${index}`,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: data,
                    success:function(res){
                        $(`#backEndBlobResult_${index}`).text("后端状态:"+res)
                        console.log(hash, res)
                    }
                })
            }
            fileReader.readAsBinaryString(blob)
        }
        function mergerFile(){
            $.get(`http://localhost:9999/mergerFile?hash=${fileHash}`, function(res){
                if (res === 200){
                    $("#blob-container").empty().text("合并成功")
                }
            })
        }
        function autoUpload() {
            if (blobs.length === 0){
                alert("请先分解文件")
            }else{
                blobs.forEach(function(item, index){
                    uploadBlob(item, index)
                })
            }
        }

    </script>

</body>
</html>